<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf - 8">
        <meta name = "viewport" content="
        initial-scale= 1.0,maximum-scale=1.0,user-scalable=no">
        <title>

        </title>
        <script src="C:/Users/24098/Desktop/978-7-302-48199-7《HTML5 App应用开发教程》教辅/配套资源包/chapter06/scripts/jquery-3.1.1.min.js">
        </script>
<style>
 	#content{
				padding: 10px;
				border: 2px dashed red;
				text-align: left;
			}
			#content li{
				margin-bottom: 10px;
				margin-left: 20px;
			}
			#content li input{
				float: right;
			}
</style>    
</head>
    
    <body>
        <ul id = "content">
            <li><span>这是Item1</span><input type = "button"
                 value ="删除"/></li>
            <li><span>这是Item2</span><input type = "button"
                value ="删除"/></li>
            <li><span>这是Item3</span><input type = "button"
                value ="删除"/></li>
            <li><span>这是Item4</span><input type = "button"
                value ="删除"/></li>
            <li><span>这是Item5</span><input type = "button"
                value ="删除"/></li>
            <li><span>这是Item6</span><input type = "button"
                value ="删除"/></li>
            </ul>
      
<input type="button" value = "增加项目" id="btnAdd"/>
<input type="button" value = "全部删除" id="btnRemoveAll"/>

        <script>
            
            $(function(){
                var $ul = $("#content");
                $("#content").click(function(e){ 
                    $(e.target).parents("li").remove();
                });
                $("#btnAdd").click(function(){
                    var count = $("#content li").length +1;
                    var html = '<li><span>这是Item'+count+'</span><input type = "button" value = "删除"/></li>';
                    $ul.append(html);
                });
                $("#btnRemoveAll").click(function(){
                    $ul.empty();
                });
                
            });
           
        </script>

    </body>
</html>